<template>
	<view>
		<view class="content">
			<!-- <view class="content_key">
				<view class="content_fl">
					<text class="text">* </text>
					<text>省/市/区</text>
				</view>
				<view class="content_fr">
					<pickerAddress @change="change"><text>{{shipZone}}</text></pickerAddress>
					<image src="../../static/iocn11.png"></image>
				</view>
			</view> -->
			<view class="content_key">
				<view class="content_fl">
					<text class="text">* </text>
					<text class="text1">详细地址</text>
				</view>
				<view class="content_fr"><input type="text" v-model="shipAddress" placeholder="请输入详细地址"
						@click="getRegeo()" /></view>
			</view>
			<view class="content_key">
				<view class="content_fl">
					<text class="text">* </text>
					<text class="text1">装货人</text>
				</view>
				<view class="content_fr"><input type="text" v-model="shipContact" placeholder="请输入装货人姓名" /></view>
			</view>
			<view class="content_key">
				<view class="content_fl">
					<text class="text">* </text>
					<text class="text1">手机号</text>
				</view>
				<view class="content_fr"><input type="number" v-model="shipTelphone" placeholder="请输入装货人手机号" /></view>
			</view>
			<view class="content_key">
				<view class="content_fl">
					<!-- 	<text class="text">* </text> -->
					<text class="text1">公司名称</text>
				</view>
				<view class="content_fr"><input type="text" v-model="shipCompany" placeholder="请输入公司名称" /></view>
			</view>
		</view>

	<!-- 	<view class="middle">
			<textarea placeholder="请粘贴或输入文本点击“识别”自动识别姓名、电话和地址"></textarea>
			<view>
				<image src="../../static/iocn13.png" ></image>
				<text>识别</text>
			</view>
		</view> -->
		<view class="map">
			<map id="map_container" :latitude="latitude" :longitude="longitude" :markers="markers" @tap="tap"
				enable-3D="false" show-compass="false" enable-overlooking="false" :enable-satellite="false"
				:enable-traffic="false" show-location="false" scale="12" />

		</view>

		<view class="footer" @click="funhuei()">确定</view>

	</view>
</template>

<script>
	import {
		GetUserById
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue'
	import amap from "@/libs/amap-wx.js";

	export default {
		components: {
			pickerAddress

		},
		data() {
			return {
				shipZone: '请点击进行选择', //所在地区
				shipAddress: '',
				shipContact: '',
				shipTelphone: '',
				shipCompany: '',
				placeShip: '',
				amapPlugin: null,
				latitude: 39.899,
				longitude: 116.39742,
				key: "e9f1231c3e04f846432856dafa4e0a97",
				markers: [{
					id: 1, // Number
					title: '1', // String-标注点名
					latitude: 39.899,
					longitude: 116.39742,
					width: 30,
					height: 30,
					iconPath: '../../static/iocn53.png', // 显示的图标
				}]
			};
		},

		onLoad() {
			this.GetUserById()
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
		},

		methods: {
			getRegeo() {
				// 判断是否有地理授权信息
				uni.getSetting({
					success: (res) => {
						console.log('获取授权信息', res)
						var status = res.authSetting
						if (!status['scope.userLocation']) { // 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
							uni.showModal({
								title: '是否授权当前位置',
								content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
								success: (tip) => {
									if (tip.confirm) {
										uni.openSetting({
											success: (data) => {
												// 如果用户授权了地理信息在，则提示授权成功
												if (data.authSetting[
														'scope.userLocation'] ===
													true) {
													uni.showToast({
														title: '授权成功',
														icon: 'success',
														duration: 1000
													})
													// 授权成功后，调用chooseLocation选择信息
													uni.chooseLocation({
														success: (res) => {
															// 这里获取到的res就是选择的地点的信息，包括经纬度，名称等
															// console.log('详细地址', res)

														}
													})
												} else {
													uni.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000
													})
												}
											}
										})
									}
								}
							})
						} else {
							// 用户授权过，直接调用选择地址
							uni.chooseLocation({
								success: (res) => {
									// 这里获取到的res就是选择的地点的信息，包括经纬度，名称等
									console.log('详细地址', res)
									this.shipAddress = res.address
									this.latitude = res.latitude
									this.longitude = res.longitude
									console.log('qwe', this.shipAddress)
								}
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '调用授权窗口失败',
							icon: 'none',
							duration: 1000
						})
					}
				})

			},
			// 在地图上点击进行选点，这个选点在地图缩放比例较大时无效，因为精读的问题。
			tap(e) {
				console.log(e);
				var location = e.detail.longitude + ',' + e.detail.latitude
				amapPlugin.getRegeo({
					location: location,
					success: (data) => {
						console.log("获取指定定位信息", data);
						this.selectAddr = {
							address: data[0].regeocodeData.formatted_address,
							latitude: e.detail.latitude,
							longitude: e.detail.longitude
						};
						this.markers[0].latitude = data[0].latitude;
						this.markers[0].longitude = data[0].longitude;
						amapPlugin.getPoiAround({
							location: data[0].longitude + ',' + data[0].latitude,
							success: (data) => {
								console.log("获取当前的列表", data);
								this.dataTips = data.poisData;
							},
							fail: (info) => {
								console.log(info)
							}
						})
					},
					fail: (info) => {
						console.log(info);
					}
				})
			},


			change(data) {
				this.shipZone = data.data.join('')
				this.placeShip = data.data[0]
				console.log(this.placeShip)
			},
			funhuei() {
				var shipZone = this.shipZone
				var shipAddress = this.shipAddress
				var shipContact = this.shipContact
				var shipTelphone = this.shipTelphone
				var shipCompany = this.shipCompany
				var placeShip = this.placeShip
				// if (shipZone == '请点击进行选择') {
				// 	uni.showToast({
				// 		title: "省市区不能为空",
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return false
				// }
				if (shipAddress == '') {
					uni.showToast({
						title: "详细地址不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (shipContact == '') {
					uni.showToast({
						title: "装货人不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (shipTelphone == '') {
					uni.showToast({
						title: "手机号不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}

				setValue('shipZone', shipZone);
				setValue('shipAddress', shipAddress);
				setValue('shipContact', shipContact);
				setValue('shipTelphone', shipTelphone);
				setValue('shipCompany', shipCompany);
				setValue('placeShip', placeShip);
				setValue("latitude", this.latitude)
				setValue("longitude", this.longitude)
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},


			// 获取用户详情
			async GetUserById() {
				var id = getValue('id')
				try {
					const {
						data: res
					} = await GetUserById({
						id
					})
					this.shipContact = res.result.trueName
					this.shipTelphone = res.result.mobile
					this.shipCompany = res.result.company
				} catch (e) {}
			},
			//自动识别
			// scancode(){
			// 	uni.scanCode({
			// 	  success:(res)=> {
			// 	    console.log(res,'res123321');
			// 	  }
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 15upx;
	}

	.map {

		position: fixed;
		top: 450upx;
		bottom: 0upx;
		left: 10upx;
		right: 0;
	}

	#map_container {
		width: 98%;
		height: 83%;
	}

	.content {
		width: 100%;
		border-radius: 17upx;
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #bababa;
		background-color: #fff;
		padding: 0 20upx;

		.content_key {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 105upx;
			border-bottom: 1upx solid #e5e5e5;

			.content_fl {
				display: flex;
				align-items: center;

				text {

					font-size: 31upx;
					font-weight: bold;
					color: #000;
				}

				.text {
					color: #EF4D3D;
					margin-right: 10upx;
				}

				.text1 {
					width: 200upx;
				}
			}

			.content_fr {
				display: flex;
				align-items: center;

				image {
					width: 32upx;
					height: 32upx;
				}

				text {
					display: block;
					text-align: left;
					font-size: 28upx;
					width: 270upx;
				}

				input {
					font-size: 28upx;
					text-align: left;
				}
			}
		}
	}

	.middle {
		width: 100%;
		border-radius: 17upx;
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #bababa;
		padding: 30upx;
		margin-top: 20upx;

		textarea {
			width: 100%;
			height: 110upx;
		}

		view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20upx;

			image {
				width: 170upx;
				height: 47upx;
			}

			text {
				width: 96upx;
				height: 47upx;
				font-size: 28upx;
				text-align: center;
				line-height: 47upx;
				color: #fff;
				border-radius: 17upx;
				background: #EF4D3D;
			}
		}
	}

	.footer {
		width: 526upx;
		height: 71upx;
		opacity: 1;
		border-radius: 17upx;
		background: #EF4D3D;
		font-size: 31upx;
		font-weight: 500;
		text-align: center;
		line-height: 71upx;
		position: fixed;
		bottom: 60upx;
		left: 112upx;
		color: #fff;
		font-weight: bold;
	}
</style>
